<template>
	<view>
		<view class="content">
			<h3>问题类型</h3>
			<view class="wt_box">
				<view v-for="(item,index) in type_list" :key="index" :class="{active:from.type==item}" @click="from.type = item">{{item}}</view>
			</view>
			<h3>描述</h3>
			<view class="ms_box">
				<textarea v-model="from.content" placeholder="请用文字简单叙述一下您所遇到的问题" />
			</view>
			<h3>示例图片</h3>
			<view class="sl_upload">
				<u-upload ref="uUpload" :action="action" name="file[]" max-count="6" :max-size="10 * 1024 * 1024" @on-success="upload" :before-upload ="beforeUpload" @on-uploaded="onUploaded" @on-remove="onRemove"></u-upload>
			</view>
			<h3>联系方式(QQ/微信)</h3>
			<view class="ph_box">
				<input type="text" v-model="from.phone" placeholder="请输入您的联系方式，方便我们进行后续的沟通">
			</view>
			<view class="submit" @click="submit">
				提交反馈
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { submit_feedback,upload } from "@/api/index.js"
	export default {
		data() {
			return {
				share: {
					title: '信息反馈',
					desc: '提交你所遇到的问题'
				},
				type_list:['页面调整','数据问题','账号故障','BUG提交','其他'],
				action: upload,
				fileList: [],
				from:{
					phone:"",
					content:"",
					type:""
				},
				disabled:false
			};
		},
		methods:{
			upload(res, index, lists, name){
				//图片上传成功
				this.fileList.push(res.data);
			},
			onUploaded(){
				//所有图片上传完成
				this.disabled = false
			},
			beforeUpload(){
				//上传中 设置不可提交
				this.disabled = true
				return true
			},
			onRemove(index, lists, name){
				this.fileList = lists.map(item => item.response.data)
			},
			submit(){
				if(this.disabled){
					return this.$refs.uToast.show({
						title: "上传未完成！",
						type: 'error'
					});
				}
				if(!this.from.type){
					return this.$refs.uToast.show({
						title: "请选择问题类型",
						type: 'error'
					});
				}
				if(!this.from.content){
					return this.$refs.uToast.show({
						title: "请填写问题描述",
						type: 'error'
					});
				}
				if(!this.from.phone){
					return this.$refs.uToast.show({
						title: "请填写您的联系方式",
						type: 'error'
					});
				}
				this.from.imgs = this.fileList.join(",");
				submit_feedback(this.from).then(res => {
					console.log(res,"提交反馈");
					if(res.code == 200){
						this.$refs.uUpload.clear();//清空文件列表
						this.fileList = [];
						this.from = {
							phone:"",
							content:"",
							type:""
						}
						this.$refs.uToast.show({
							title: res.data,
							type: 'success'
						});
					}else{
						this.$refs.uToast.show({
							title: res.data,
							type: 'error'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 20rpx;
		h3{
			font-size: 38rpx;
			font-weight: 600;
		}
		.wt_box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 15rpx 0 0;

			>view {
				width: 22%;
				padding: 15rpx 15rpx;
				border-radius: 50rpx;
				border: 1rpx solid #ddd;
				text-align: center;
				margin-bottom: 20rpx;
				&.active{
					background-color: #2B7FFD;
					color: #fff;
				}
			}
		}

		.ms_box {
			padding: 15rpx 0;

			textarea {
				box-sizing: border-box;
				width: 100%;
				height: 300rpx;
				resize: none;
				background-color: #F5F6F8;
				border-radius: 25rpx;
				padding: 25rpx;
			}
		}
		.sl_upload{
			padding: 15rpx 0;
		}
		.ph_box{
			padding: 15rpx 0;
			input{
				background-color: #f5f6f8;
				border-radius: 15rpx;
				padding: 15rpx 25rpx;
			}
		}
		.submit{
			background-color: #2B7FFD;
			border-radius: 10rpx;
			color: #fff;
			text-align: center;
			padding: 20rpx 0;
			margin-top: 20rpx;
		}
	}
</style>
